import { createStyles } from "antd-style"

export const useStyles = createStyles(({ token }) => {
	return {
		pdfViewer: {
			width: "100%",
			height: "100%",
			backgroundColor: token.colorBgBase,
			overflow: "hidden",
			position: "relative",
		},
		pdfContainer: {
			width: "100%",
			height: "100%",
			overflow: "auto",
			// display: "flex",
			// flexDirection: "column",
			// alignItems: "center",
			position: "relative",
			// "& .react-pdf__Document": {
			// 	display: "flex",
			// 	flexDirection: "column",
			// 	alignItems: "center",
			// },
			"& .react-pdf__Page": {
				margin: "10px 0",
				boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
			},
		},
		zoomIcon: {
			width: "18px",
			height: "18px",
		},
		pdfViewerContainer: {
			position: "absolute",
			bottom: "20px",
			left: "50%",
			transform: "translateX(-50%)",
			display: "flex",
			alignItems: "center",
			gap: "16px",
			padding: "16px 28px",
			borderRadius: "18px",
			background: "#333",
			boxShadow: "0 2px 16px rgba(0,0,0,0.18)",
			zIndex: 1000,
			pointerEvents: "auto",
		},
		zoomButton: {
			background: "none",
			border: "none",
			outline: "none",
			cursor: "pointer",
			display: "flex",
			alignItems: "center",
			justifyContent: "center",
			width: "32px",
			height: "32px",
			borderRadius: "50%",
			transition: "background 0.2s",
			color: "#fff",
			fontSize: "20px",
			"&:hover": {
				background: "rgba(255,255,255,0.12)",
			},
		},
		zoomSlider: {
			width: "120px",
			margin: "0 12px",
		},
		zoomPercent: {
			color: "#fff",
			fontSize: "16px",
			width: "48px",
			textAlign: "center",
		},
		rotateButton: {
			background: "none",
			border: "none",
			outline: "none",
			cursor: "pointer",
			display: "flex",
			alignItems: "center",
			justifyContent: "center",
			width: "32px",
			height: "32px",
			borderRadius: "50%",
			transition: "background 0.2s",
			color: "#fff",
			fontSize: "20px",
			marginLeft: "8px",
			"&:hover": {
				background: "rgba(255,255,255,0.12)",
			},
		},
		loading: {
			width: "100%",
			height: "100px",
			display: "flex",
			justifyContent: "center",
			alignItems: "center",
			color: token.colorTextSecondary,
		},
		pageButton: {
			padding: "4px 12px",
			borderRadius: "4px",
			cursor: "pointer",
			backgroundColor: token.colorPrimary,
			color: token.colorWhite,
			border: "none",
			outline: "none",
			"&:disabled": {
				opacity: 0.5,
				cursor: "not-allowed",
			},
		},
		pageInfo: {
			fontSize: "14px",
			color: token.colorTextSecondary,
		},
	}
})
